<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"><!--引入thymeleaf-->
<meta name="referrer" content="no-referrer"/>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title th:text="${sectionname}"></title>
	<link rel="stylesheet" href="/css/bootstrap.min.css">
	<link rel="stylesheet" href="/css/index.css">
	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link href="/css/materialdesignicons.min.css" rel="stylesheet">
	<link href="/css/style.min.css" rel="stylesheet">
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	<script type="text/javascript" src="/js/bootstrap.min.js"></script>
	<script src="/js/community.js" type="application/javascript"></script>
</head>
<body class="body">
<!--导入导航栏-->
<div th:insert="~{navigation :: copy}"></div>
<!--个人中心的页面布局-->
<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-ss-12">
            <h2><span th:text="${sectionname}"></span></h2>
            <hr>
            <!--我的问题-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-ss-12" th:if="${section}=='questions'">
                <div class="media" th:each="question:${questionIPage.getRecords()}">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object img-circle picset"
                                 th:src="${question.tbStu.stuImg}">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">
                            <a th:href="@{'/question/'+${question.id}}" th:text="${question.title}"></a>
                        </h4>
                        <span>
                        <a th:utext="${question.description}" th:href="@{'/question/'+${question.id}}"></a>
                    </span>
                        <br>
						<span class="common-list"><span th:text="${question.commentCount}"/> 个评论 • <span
								th:text="${question.viewCount}"/> 次浏览 • <span th:text="${question.likeCount}"/>个点赞 <span
								th:text="${#temporals.format(question.createtime,'yyyy-MM-dd HH:mm:ss')}"></span></span>
                    </div>
                </div>

				<form class="pull-right search-bar" action='/personal' id="form3" method='post' role="form">
					<input type="hidden" name="page" id="pageNo" th:value="${page}">
					<input type="hidden" name="action" th:value="${section}">
				</form>
				<div class="pagination">

					<div id="myPage">

					</div>
					<link rel="stylesheet" type="text/css" href="/js/page/jquery.sPage.css">
					<script type="text/javascript"
							src="/js/page/jquery.sPage.min.js"></script>
					<script type="text/javascript" th:inline="javascript">
                        //初始化分页组件

                        $("#myPage").sPage({

                            page:[[${page}]],//当前页码，必填
                            total:[[${questionIPage.getTotal()}]],//数据总条数，必填
                            pageSize:[[${questionIPage.getSize()}]],//每页显示多少条数据，默认10条
                            totalTxt:"共"+[[${questionIPage.getTotal()}]]+"条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
                            showTotal:true,//是否显示总条数，默认关闭：false
                            showSkip:true,//是否显示跳页，默认关闭：false
                            showPN:true,//是否显示上下翻页，默认开启：true
                            prevPage:"上一页",//上翻页文字描述，默认“上一页”
                            nextPage:"下一页",//下翻页文字描述，默认“下一页”
                            backFun:function(page){
                                //点击分页按钮回调函数，返回当前页码
                                console.log(page);
                                $("#pageNo").val(page);
                                $("#form3").submit();
                            }
                        });

                        //回调方法:点击上一页和下一页
                        function handlePaginationClick(new_page_index, pagination_container) {
                            $("#pageNo").val(new_page_index + 1);
                            $("#form3").submit();
                        }

					</script>

				</div>
            </div>
            <!--我的消息-->
            <div class="col-lg-12 col-md-12 col-sm-12 col-ss-12" th:if="${section}=='information'">
                <div class="media" th:each="notification:${NotificationPage.getRecords()}">
                    <span th:text="${notification.tbStu.name}"></span>
                    <span th:if="${notification.type==1}">回复了你的评论</span>
                    <span th:if="${notification.type==2}">回复了你的问题</span>
                    <a th:href="@{'/notification/'+${notification.id}}">
                        <span th:text="${notification.tbComment.content}"></span>
                    </a>
                    <span class="label label-danger" th:if="${notification.status==0}">未读</span>
                    <br>
                    <span th:text="${#temporals.format(notification.createtime,'yyyy-MM-dd HH:mm:ss')}"></span>
                    <hr>
                </div>


				<form class="pull-right search-bar" action='/personal' id="form4" method='post' role="form">
					<input type="hidden" name="page" id="pageNo1" th:value="${page}">
					<input type="hidden" name="action" th:value="${section}">
				</form>
				<div class="pagination">

					<div id="myPage1">

					</div>
					<link rel="stylesheet" type="text/css" href="/js/page/jquery.sPage.css">
					<script type="text/javascript"
							src="/js/page/jquery.sPage.min.js"></script>
					<script type="text/javascript" th:inline="javascript">
                        //初始化分页组件

                        $("#myPage1").sPage({

                            page:[[${page}]],//当前页码，必填
                            total:[[${NotificationPage.getTotal()}]],//数据总条数，必填
                            pageSize:[[${NotificationPage.getSize()}]],//每页显示多少条数据，默认10条
                            totalTxt:"共"+[[${NotificationPage.getTotal()}]]+"条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
                            showTotal:true,//是否显示总条数，默认关闭：false
                            showSkip:true,//是否显示跳页，默认关闭：false
                            showPN:true,//是否显示上下翻页，默认开启：true
                            prevPage:"上一页",//上翻页文字描述，默认“上一页”
                            nextPage:"下一页",//下翻页文字描述，默认“下一页”
                            backFun:function(page){
                                //点击分页按钮回调函数，返回当前页码
                                console.log(page);
                                $("#pageNo1").val(page);
                                $("#form4").submit();
                            }
                        });

                        //回调方法:点击上一页和下一页
                        function handlePaginationClick(new_page_index, pagination_container) {
                            $("#pageNo1").val(new_page_index + 1);
                            $("#form4").submit();
                        }

					</script>

				</div>

            </div>

        </div>
        <!--右侧的导航栏-->
        <div class="col-lg-3 col-md-12 col-sm-12 col-ss-12">
            <div class="list-group personal">
                <a href="/personal?action=questions" th:class="${section=='questions'}?'list-group-item active' : 'list-group-item' ">
                    我的问题
                </a>
                <a href="/personal?action=information" th:class="${section=='information'}?'list-group-item active' : 'list-group-item' ">
                    我的消息
                    <span class="badge" th:text="${session.unreadnum}"></span>
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>